<template>
  <div class="welcome">
    <img class="welcome1" :src="require('../assets/images/welcome1.png')" alt="">
    <img class="welcome2" :src="require('../assets/images/welcome2.png')" alt="">
    <div class="center">
      <img class="welcome3 animated fadeInLeftBig" :src="require('../assets/images/welcome3.png')" alt="">
      <img class="welcome4 animated fadeInDownBig" :src="require('../assets/images/welcome4.png')" alt="">
      <img class="welcome5 animated fadeInUpBig" :src="require('../assets/images/welcome5.png')" alt="">
      <img class="welcome6 animated fadeInRightBig" :src="require('../assets/images/welcome6.png')" alt="">
    </div>
    <img class="logo animated fadeIn" :src="require('../assets/images/logo.png')" alt="">
    <img @click="description()" class="welcome-button animated pulse infinite" :src="require('../assets/images/welcome-button.png')" alt="">
  </div>
</template>

<script>
export default {
  name: 'welcome',
  mounted () {
  },
  methods: {
    description () {
      this.$router.push({
        path: '/description'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@import '../assets/css/color.scss';
@import '../assets/css/mixins.scss';
.welcome{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
}
.welcome1,.welcome2,.logo,.welcome-button{
  position:absolute;
  z-index:2;
  animation-delay: 1s;
}
@keyframes welcome {
  to {
    transform:translate3d(0, 0, 0)
  }
}
.welcome1{
  right:0;
  top:.5rem;
  width:2.2rem;
  transform:translate3d(2.2rem, -2.2rem, 0);
  animation: welcome 1s linear 1s;
  animation-fill-mode: forwards;
}
.welcome2{
  left:0;
  top:7.1rem;
  width:1.88rem;
  animation: welcome 1s linear 1s;
  transform:translate3d(-2.2rem, 2.2rem, 0);
  animation-fill-mode: forwards;
}
.center{
  position:absolute;
  top:3.6rem;
  left:50%;
  margin-left:-1.8rem;
  width:3.6rem;
  height:3.6rem;
}
.welcome3{
  left:0;
  top:0;
}
.welcome4{
  right:0;
  top:0;
}
.welcome5{
  left:0;
  bottom:0;
}
.welcome6{
  right:0;
  bottom:0;
}
.welcome3,.welcome4,.welcome5,.welcome6{
  z-index:2;
  position: absolute;
  width:1.74rem;
  height:1.74rem;
  animation-delay: 1s;
  animation-duration: 1.5s;
}
.logo{
  width:.92rem;
  top:68%;
  left:50%;
  margin-left:-.46rem;
}
.welcome-button{
  width:2.9rem;
  bottom:12%;
  left:50%;
  margin-left:-1.45rem;
}
</style>
